<template>
    <div class="header warp">
        <div class="logo"><img src="@/assets/img/indexLogo.6f8ac4f0.png" alt="" /></div>
        <ul class="nav">
            <li :class="{ current: $route.path == '/home' }" @click="$router.push('/home')">
                首页
            </li>
            <li :class="{ current: $route.path == '/goods' }" @click="$router.push('/goods')">
                全部礼品
            </li>
            <li :class="{ current: $route.path == '/user' }" @click="$router.push('/user')">
                个人中心
            </li>
            <li :class="{ current: $route.path == '/order' }" @click="$router.push('/order')">
                我的订单
            </li>
            <li :class="{ current: $route.path == '/free' }" @click="$router.push('/free')">
                专属福利
            </li>
        </ul>
        <div class="search">
            <input type="text" placeholder="请输入关键字" v-model="searchinfo" />
            <div @click="searchclick">
                <a href=""><img src="@/assets/img/search.png" alt="" class="search-btn" /></a>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            searchinfo: '',
        };
    },
    methods: {
        ...mapMutations({
            changeIsLogined: 'showmodal/changeIsLogined',
        }),
        searchclick() {
            this.$router.push(`/goods?keyword=${this.searchinfo}`);
            this.searchinfo = '';
        },
    },
};
</script>

<style lang="less" scoped>
.header {
    padding-top: 12px;
    display: flex;
    height: 99px;
    justify-content: space-between;
    align-items: center;

    .nav {
        width: 500px;
        display: flex;

        justify-content: space-between;
        li {
            cursor: pointer;
            a {
                color: #333;
                font-size: 16px;
                font-family: SourceHanSansSC;
                font-weight: 500;
            }
            &.current {
                color: #0a328e;
            }
        }
    }
    .search {
        // width: 264px;
        display: flex;
        input {
            width: 214px;
            height: 40px;
            border-radius: 20px 0 0 20px;
            outline: none;
            border: solid 1px #dedede;
            text-indent: 1em;
            box-sizing: border-box;
        }
        div {
            width: 50px;
            height: 40px;
            border-radius: 0px 20px 20px 0px;
            background-color: #0a328e;
            border: solid 1px #dedede;
            text-align: center;
            line-height: 40px;
            box-sizing: border-box;
            .search-btn {
                width: 15px;
                height: 15px;
            }
        }
    }
}
</style>
